<template>
  <div class="login">
    <!-- <div class="loginTitle">智慧环卫系统</div> -->
    <!-- <div class="loginTitle">远航环卫作业公司智慧环卫平台</div> -->
    <!-- <div class="loginTitle">环卫一体化作业智慧环卫监管平台</div> -->
    <div class="loginTitle">东丽区环卫一体化作业智慧环卫监管平台</div>
    <!-- <div class="loginTitle">成华区环卫一体化作业智慧环卫监管平台</div> -->
    <div class="loginTitle2">——————————————</div>
    <!-- <div class="loginTitle2">——————— 技术支持 : 联合远航 ———————</div> -->
    <!-- <div class="loginTitle">赣州环卫一体化作业智慧环卫监管平台</div> -->
    <!-- <div class="loginTitle">佳好佳智慧环卫平台</div> -->
    <img src="../../assets/img/login.jpg" alt />
    <div id="logo" class="logo">
      <img
        style="width: 68%; height: 68%; margin-top: 80px"
        src="../../assets/img/loginImage.png"
        alt
      />
    </div>
    <div class="divSelect">
      <el-row :gutter="0">
        <el-col class="blue1" v-if="menuShowList['1']">
          <div class="grid-content" @click="turnVehicle()">
            道路
            <br />机扫
          </div>
          <!-- <img src="@/assets/此图片已经删除.jpg" alt /> -->
        </el-col>
        <el-col class="blue2" v-if="menuShowList['2']">
          <div class="grid-content" @click="turnWorker()">
            人工
            <br />保洁
          </div>
        </el-col>
        <!-- <el-col class="blue3" v-if='(menuShowList["008"])'>
          <div class="grid-content">
            以克
            <br />论净
          </div>
        </el-col> -->
        <el-col class="blue3" v-if="menuShowList['8']">
          <div class="grid-content">
            以克
            <br />论净
          </div>
        </el-col>
        <el-col class="blue1" v-if="menuShowList['4']">
          <div class="grid-content" @click="turnWC()">
            公厕
            <br />维保
          </div>
        </el-col>
        <el-col class="blue2" v-if="menuShowList['12']">
          <div class="grid-content" @click="turnFacility()">
            基础
            <br />设施
          </div>
        </el-col>
        <el-col class="blue2" v-if="menuShowList['23']">
          <div class="grid-content" @click="turnConfiguration()">
            配置
            <br />管理
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="0" style="position: relative; top: -50px; left: -90px">
        <el-col class="blue3" v-if="menuShowList['10']">
          <div class="grid-content" @click="turnLaJiJiFenServe()">
            垃圾
            <br />分类
          </div>
        </el-col>
        <el-col class="blue2" v-if="menuShowList['3']">
          <div class="grid-content" @click="turnRubbish()">
            垃圾
            <br />收运
          </div>
        </el-col>
        <el-col class="blue1" v-if="menuShowList['22']">
          <div class="grid-content" @click="turnZZZ()">
            转运
            <br />管理
          </div>
        </el-col>
        <el-col class="blue3" v-if="menuShowList['18']">
          <div class="grid-content" @click="turnDisposal()">
            末端
            <br />处置
          </div>
        </el-col>
        <el-col class="blue3" v-if="menuShowList['16']">
          <div class="grid-content" @click="turnGarbageReporting()">
            垃圾
            <br />上报
          </div>
        </el-col>
        <el-col class="blue3" v-if="menuShowList['17']">
          <div class="grid-content" @click="turnGarbageRFID()">
            RFID
            <br />统计
          </div>
        </el-col>
        <el-col class="blue2" v-if="menuShowList['9']">
          <div class="grid-content" @click="turnCanChuServe()">
            餐厨
            <br />垃圾
          </div>
        </el-col>
        <el-col class="blue1" v-if="menuShowList['21']">
          <div class="grid-content" @click="turnShuJuDaPinServe()">
            数据
            <br />大屏
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="0" style="position: relative; top: -100px">
        <el-col class="blue3" v-if="menuShowList['5']">
          <div class="grid-content" @click="turnCarServe()">
            车务
            <br />机务
          </div>
        </el-col>
        <el-col class="blue2" v-if="menuShowList['11']">
          <div class="grid-content" @click="turnMucksoil()">
            渣土
            <br />收运
          </div>
        </el-col>
        <el-col class="blue1" v-if="menuShowList['6']">
          <div class="grid-content" @click="turnComprehensiveServe()">
            综合
            <br />显示
          </div>
        </el-col>
        <el-col class="blue2" v-if="menuShowList['13']">
          <div class="grid-content" @click="turnSupervisionAssessment()">
            监督
            <br />考核
          </div>
          <!-- <img src="@/assets/此图片已经删除.jpg" alt /> -->
        </el-col>

        <el-col class="blue3" v-if="menuShowList['15']">
          <div class="grid-content" @click="turnHumanisticConcern()">
            人文
            <br />关怀
          </div>
        </el-col>
        <!-- <el-col class="blue3" v-if="menuShowList['14']">
          <div class="grid-content" @click="turnFeedBack()">
            应急
            <br />事件
          </div>
        </el-col> -->
        <el-col class="blue1" v-if="menuShowList['7']">
          <div class="grid-content" @click="turnAccountManage()">
            账户
            <br />角色
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 用户名下拉菜单 -->
    <el-form class="user-name" style="width: 20%">
      <!-- <el-form-item label="选择分组："> -->
      <el-form-item>
        <el-dropdown split-button type="primary" @command="handleCommand">
          {{ username }}
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="item in userList"
              :key="item.CLIENT_NO"
              :command="{ value: item.CLIENT_NO, label: item.USERNAME }"
              >{{ item.USERNAME }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
    </el-form>
    <!-- [{"CLIENT_NO":"0000009","USERNAME":"博德尔公司","UID":"dlhw","PWD":"dlhw"},{"CLIENT_NO":"0000001","USERNAME":"东丽东片区","UID":"dldp","PWD":"dldp"}] -->
    <!-- <el-dropdown split-button type="primary" @command="handleCommand" class="user-name">
      {{ username }}
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item :command="{value:'0000009',label:'博德尔公司',flag:1}">博德尔公司</el-dropdown-item>
        <el-dropdown-item :command="{value:'0000001',label:'东丽东片区',flag:2}">东丽东片区</el-dropdown-item>
        <el-dropdown-item :command="{value:'0',label:'',flag:0}">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>-->
    <!-- <div class="pageDown"></div> -->
  </div>
</template>
<script>
import Astrict from '@/utils/exportExcel/astrict.js'
export default {
  data () {
    return {
      username: '',
      userList: [],
      menuShowList: {
        "1": false,
        "2": false,
        "3": false,
        "4": false,
        "5": false,
        "6": false,
        "7": false,
        "8": false,
        "9": false,
        "10": false,
        "11": false,
        "12": false,
        "13": false,
        "14": false,
        "15": false,
        "16": false,
        "17": false,
        "18": false,
        "21": false,
        "22": false,
        "23": false,
      },


    }
  },
  mounted () {
    this.getInfoList()
    var div1 = document.getElementById('logo')
    var height = (div1.offsetHeight * 71) / 64
    div1.style.width = height + 'px'
    // Astrict() // 登出超时判断
  },
  created () {
    this.getRoleList()
  },
  methods: {
    async getInfoList () {
      // var url =
      //   'Role/GetLoginInfo?UserID=' +
      //   localStorage.getItem('LOGIN_NAME')
      var url =
        'Role/GetLoginInfo?UserID=' + localStorage.getItem('LOGIN_NAME')
      let { data } = await this.$Http.get(url)
      // if (data.length > 0) {
      //   localStorage.setItem('CLIENT_NO', data[0].CLIENT_NO)
      //   localStorage.setItem('USERNAME', data[0].USERNAME)
      //   this.username = data[0].USERNAME
      // }
      this.userList = data
      var screeningData = data.filter(item => item.CLIENT_NO === localStorage.getItem('CLIENT_NO_LOGIN'))
      if (screeningData.length == 0) {
        this.userList.push({
          CLIENT_NO: localStorage.getItem('CLIENT_NO_LOGIN'),
          // USERNAME: localStorage.getItem('USERNAME_LOGIN')
          USERNAME: '全部项目'
        })
      }
      if (localStorage.getItem('CLIENT_NO') === '00000') {
        this.username = '全部项目'
      } else {
        this.username = localStorage.getItem('USERNAME')
      }
      this.userList.push(
        // {
        //   CLIENT_NO: localStorage.getItem('CLIENT_NO_LOGIN'),
        //   USERNAME: '全部'
        // },
        { CLIENT_NO: '0', USERNAME: '退出登录' }
      )
    },
    handleCommand (command) {
      // this.$message('click on item ' + command);
      if (command.value === '0') {
        localStorage.removeItem('CLIENT_NO')
        localStorage.removeItem('USERNAME')
        this.$router.push('/login')
      } else {
        this.username = command.label
        localStorage.setItem('CLIENT_NO', command.value)
        localStorage.setItem('USERNAME', command.label)
        if (command.value.indexOf('00001') != -1) {
          localStorage.setItem('LNG', '104.12109400')
          localStorage.setItem('LAT', '30.669163')
        } else {
          localStorage.setItem('LNG', '117.320569')
          localStorage.setItem('LAT', '39.092332')
        }
      }
    },
    
    async turnVehicle () {
      console.log('turnVehicle')
      localStorage.setItem('CurrentService', '001')
      localStorage.setItem('CurrentServiceZ', 'Vehicle')
      this.$router.push({
          path: '/SettingTeamVehicle'
        })
    },
    turnWorker () {
      console.log('turnWorker')
      localStorage.setItem('CurrentService', '002')
      localStorage.setItem('CurrentServiceZ', 'Worker')
      this.$router.push({
        path: '/WorkerAttendanceAsk'
      })
    },
    turnRubbish () {
      console.log('turnRubbish')
      localStorage.setItem('CurrentService', '003')
      localStorage.setItem('CurrentServiceZ', 'Rubbish')
      this.$router.push({
        path: '/RubbishHome'
      })
    },
    
    turnWC () {
      console.log('turnWC')
      localStorage.setItem('CurrentService', '004')
      localStorage.setItem('CurrentServiceZ', 'WC')
      this.$router.push({
        path: '/WCHome'
      })
    },
    turnCarServe () {
      console.log('turnCarServe')
      localStorage.setItem('CurrentService', '005')
      localStorage.setItem('CurrentServiceZ', 'CarServe')
      this.$router.push({
        path: '/CarServeHome'
      })
    },
    turnComprehensiveServe () {
      console.log('turnComprehensiveServe')
      localStorage.setItem('CurrentService', '006')
      localStorage.setItem('CurrentServiceZ', 'Comprehensive')
      this.$router.push({
        path: '/ComprehensiveHome'
      })
    },
    
    turnShuJuDaPinServe () {
      // window.open('http://111.160.78.62:4468/#/login')
      // window.open('http://111.160.78.62:4468/#/login?admin&123456')
      window.open('http://111.160.78.62:4512/#/indexCd')
    },
    turnAccountManage () {
      console.log('turnAccountManage')
      localStorage.setItem('CurrentService', '007')
      localStorage.setItem('CurrentServiceZ', 'Account')
      this.$router.push({
        path: '/AccountManage'
      })
    },
    
    //渣土收运
    turnMucksoil () {
      console.log('turnMucksoil')
      localStorage.setItem('CurrentService', '011')
      localStorage.setItem('CurrentServiceZ', '011')
      this.$router.push({
        path: '/MucksoilHome'
      })
    },
    // 设施管理
    turnFacility () {
      console.log('turnFacility')
      localStorage.setItem('CurrentService', '012')
      localStorage.setItem('CurrentServiceZ', '001')
      this.$router.push({
        path: '/PlaceWaterHome'
      })
    },
    // 监督考核
    turnSupervisionAssessment () {
      console.log('turnSupervisionAssessment')
      localStorage.setItem('CurrentService', '013')
      localStorage.setItem('CurrentServiceZ', '001')
      this.$router.push({
        path: '/AssessmentItems'
      })
    },
    //应急事件
    turnFeedBack () {
      console.log('turnFeedBack')
      localStorage.setItem('CurrentService', '014')
      localStorage.setItem('CurrentServiceZ', '001')
      this.$router.push({
        path: '/QueryWorkFeedback'
      })
    },
    //末端处置
    turnDisposal () {
      console.log('turnDisposal')
      localStorage.setItem('CurrentService', '018')
      localStorage.setItem('CurrentServiceZ', '018')
      this.$router.push({
        path: '/DisposalHome'
      })
    },
    turnCanChuServe () {
      // window.open('http://111.160.78.62:4464/#/login?bh&bh')
      console.log('turnCanChuServe')
      localStorage.setItem('CurrentService', '019')
      localStorage.setItem('CurrentServiceZ', '019')
      this.$router.push({
        path: '/KitchenHome'
      })
    },
    turnLaJiJiFenServe () {
      // window.open('http://111.160.78.62:4468/#/login')
      // window.open('http://111.160.78.62:4468/#/login?admin&123456')
      // window.open('http://111.160.78.62:4470/#/login?admin&123456')
      // console.log('turnClassification')
      localStorage.setItem('CurrentService', '020')
      localStorage.setItem('CurrentServiceZ', '020')
      this.$router.push({
        path: '/ClassificationHome'
      })
    },
    
    // 人文关怀
    turnHumanisticConcern () {
      console.log('turnHumanisticConcern')
      localStorage.setItem('CurrentService', '015')
      this.$router.push({
        path: '/WorkerAlert'
      })
    },
    // 垃圾上报
    turnGarbageReporting () {
      window.open('http://111.160.78.62:9421/#/login?')
    },
    turnGarbageRFID () {
      // console.log('turnGarbageRFID')
      localStorage.setItem('CurrentService', '017')
      this.$router.push({
        path: '/ExcelRFIDInfo'
      })
    },
    turnZZZ () {
      // console.log('turnGarbageRFID')
      localStorage.setItem('CurrentService', '022')
      localStorage.setItem('CurrentServiceZ', '022')
      this.$router.push({
        path: '/StationHome'
      })
    },
    turnConfiguration () {
      // console.log('turnGarbageRFID')
      localStorage.setItem('CurrentService', '023')
      this.$router.push({
        path: '/VehicleAlertThreshold'
      })
    },
    // 获取菜单列表
    async getRoleList () {
      const params = {
        userName: localStorage.getItem('LOGIN_NAME')
      }
      const { data } = await this.$Http.get('Role/GetMenuInfoList_Z', {
        params
      })
      this.menuData = data
      console.log(data)
      data.filter((item) => {
        this.menuShowList[item.ID] = true
      })
    }
  }
}
</script>
<style scoped lang="less">
.login {
  width: 100%;
  height: 100%;
}
/deep/.el-form-item__label {
  line-height: 50px;
  font-size: 20px;
  width: 120px;
}
.loginTitle {
  /* margin: 1em 0 0.5em 0; */
  font-weight: 600;
  /* text-transform: uppercase; */
  color: #007acc;
  /* font-style: italic; */
  /* font-family: 'Josefin Sans', sans-serif; */
  font-size: 45px;
  line-height: 54px;
  /* text-shadow: 2px 5px 0 rgba(0,0,0,0.2); */
  text-align: center;
  top: 10%;
  width: 100%;
  position: absolute;
  z-index: 2;
}
.loginTitle2 {
  /* margin: 1em 0 0.5em 0; */
  font-weight: 600;
  /* text-transform: uppercase; */
  color: #007acc;
  /* font-style: italic; */
  /* font-family: 'Josefin Sans', sans-serif; */
  font-size: 25px;
  line-height: 54px;
  /* text-shadow: 2px 5px 0 rgba(0,0,0,0.2); */
  text-align: center;
  top: 17%;
  // left: 15%;
  width: 100%;
  height: 10%px;
  position: absolute;
  z-index: 2;
}
.divSelect {
  padding-top: 50px;
  // padding-left: calc(~'50% - 550px');//左边是一半，100%-150【el-col的宽】*6【一行6个el-col】-40【el-col的margin-left + margin-right】*5【el-col的间隔数】
  // padding-left: 45%;
  top: 20%;
  right: 5%;
  // width: 400%;
  // height: 40%;
  position: absolute;
}
.login img {
  width: 100%;
  height: 100%;
  position: relative;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  width: 180px;
  height: 190px;

  margin-left: 10px;
}
.blue1 {
  background: url(../../assets/img/Menu/blue1.png) no-repeat;
  background-size: 100% 100%;
}
.blue2 {
  background: url(../../assets/img/Menu/blue2.png) no-repeat;
  background-size: 100% 100%;
}
.blue3 {
  background: url(../../assets/img/Menu/blue3.png) no-repeat;
  background-size: 100% 100%;
}
.grid-content {
  padding-top: 42px;
  width: 180px;
  height: 190px;
  text-align: center;
  font-size: 38px;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
}
.user-name {
  position: absolute;
  right: -3.646vw;
  top: 11%;
  z-index: 100;
}
.logo {
  position: absolute;
  // width: 60%;
  height: 60%;
  left: 5%;
  top: 20%;
  bottom: 20%;
  // background:url(../../assets/img/loginImage.png);
}
</style>
